import React, { useState,useEffect } from 'react'
import { Card, Table, Button, Form, Input, Select } from 'antd';
// import axios from "axios"
import {findGoods,findGoodsByType} from "../../../apis/goods"
import {Link,useNavigate} from "react-router-dom"

const { Option } = Select;


export default function List() {
  const [columns, setcolumns] = useState([
    {
      title: '商品名字',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '商品描述',
      dataIndex: 'title',
      align: 'center'
    },
    {
      title: '商品价格',
      dataIndex: 'price',
      align: 'center'
    },
    {
      title: '商品类型',
      dataIndex: 'type',
      align: 'center',
      render: (params) => {
        //第一个参数，匹配数据结果
        //第二个参数，整行数据
        // console.log(_);
        // console.log(row);
        if (params) {
          return params.name
        } else {
          return "暂无数据"
        }
      }
    },
    {
      title: '商品状态',
      dataIndex: 'state',
      align: 'center',
      render: (params) => {
        const res = params ? <Button type='primary'>点击下架</Button> : <Button type='dashed'>点击上架</Button>
        return res
      }
    },
    {
      title: '操作',
      render: (pa1, pa2) => {
        return (
          <>
            <Button>删除</Button>
            <Button onClick={()=>gotoUpdateEvent(pa1._id)} type='primary'>修改</Button>
          </>
        )
      }
    }
  ])
  const [tableData, setTableData] = useState([
    {
      _id: "5fbfa53461d8a9055011ac20",
      name: "小米10",
      title: "至尊纪念版 双模5G 骁龙865 120HZ高刷新率 ",
      price: 299,
      type: {
        _id: "5fbccd4aea6c0000ff007f33",
        name: "数码产品",
        parentId: "0",
        type: "一级分类",
        updateDate: null
      },
      imgSrc: "3.jpg",
      msg: "商品名称：小米10至尊纪念版商品编号：100014565820商品毛重：0.8kg商品产地：中国大陆CPU型号：骁龙865运行内存：12GB机身存储：256GB存储卡：不支持存储卡摄像头数量：后置四摄后摄主摄像素：4800万像素前摄主摄像素：2000万像素主屏幕尺寸（英寸）：6.67英寸分辨率：全高清FHD+屏幕比例：19.6~20:9屏幕前摄组合：开孔屏充电器：其他热点：液冷散热，人脸识别，无线充电，快速充电，NFC，屏幕指纹，曲面屏，5G，超高屏占比，屏幕高刷新率特殊功能：超大字体，超大音量，语音识别(文字语音互转)，极简桌面模式屏占比：≥92%操作系统：Android(安卓)游戏配置：液冷散热游戏性能：发烧级充电功率：100W以上",
      createDate: "2020-11-26T12:53:08.611Z",
      updateDate: "2020-11-27T02:18:09.629Z",
      delstate: 1,
      state: 1
    }
  ])
  const [searchType,setSearchType] = useState("")
  const [searchData,setSearchData] = useState("")
  const navigate = useNavigate()
  
  // useEffect(()=>{
  //   axios.get("http://127.0.0.1:8002/goods/findGoods").then(msg=>{
  //     console.log(msg);
  //   })
  // },[])
  useEffect(()=>{
    fetchData()
  },[])

  const fetchData =async ()=>{
    const res = await findGoods()
    console.log(res);
    setTableData(res.data.data)
  }
  
  const onChangeEvent = (value) => {
    setSearchType(value)
  }
  const inputChangeEvent = (e) => {
    setSearchData(e.target.value)
  }
  const searchDataEvent =async () => {
    console.log(searchType,searchData);
    const res = await findGoodsByType({searchType,searchData})
    setTableData(res.data.data)
  }
  const searchElement = (
    <>
      <Select
      style={{width:"180px"}}
        showSearch
        placeholder="Select a person"
        optionFilterProp="children"
        onChange={onChangeEvent}
        options={[
          {
            value: 'name',
            label: '按照名字搜索',
          },
          {
            value: 'title',
            label: '按照描述搜索',
          },
        ]}
      />
      <Input placeholder='请输入内容' style={{ width: "180px", margin: "0px 15px" }} onChange={inputChangeEvent} />
      <Button onClick={searchDataEvent}>搜索</Button>
    </>
  )

  /**
   * 
   */
  const gotoUpdateEvent = (value)=>{
    // navigate({
    //   pathname:"/home/updateProduct"
    // })
    // navigate("/home/updateProduct?id=1")
    // navigate("/home/updateProduct?id=1&name=xiaowang")
    navigate("/home/updateProduct",{
      state:{id:value}
    })
    // navigate("/home/updateProduct/100/xiaowu")
  }
  return (
    // 虚拟标签 <> <React.Fragment>
    <React.Fragment>
      <div style={{height:"100px",display:"flex",alignItems:"center"}}>
        {searchElement}
      </div>
      <Card
        title="商品列表"
        extra={<Link to="/home/addProduct">添加商品</Link>}
        style={{
          width: "100%",
        }}
      >
        <Table 
         rowKey="_id"
        bordered={true} 
        columns={columns} 
        loading={false} 
        dataSource={tableData} 
        pagination={{defaultCurrent:1,defaultPageSize:5,showQuickJumper:true,showSizeChanger:true,pageSizeOptions:[5,8]}}
        />
      </Card>
    </React.Fragment>

  )
}
